<template>
	<view class="page user">
		<view class="wone">
			<view class="dan">
				<text class="dannum">订单号：{{ info.mdDeviceApply.code }}</text>
				<text class="fzhi" @click="copytxt(info.mdDeviceApply.code||'')">复制</text>
				<text class="sname" :style="`color: ${zifu(info.mdDeviceApply.apply_status).color}`">
					{{ zifu(info.mdDeviceApply.apply_status).title }}
				</text>
			</view>
			<view class="dantwo">
				<text class="daname">{{ info.mdDeviceType.name }}</text>
				<text class="shu">×{{ info.mdDeviceApply.qty }}</text>
				<!-- <view class="qxbtn">取消</view> -->
			</view>
			<text class="zname">支持功能：{{ Support(info.mdDeviceType.compoment) }}</text>
		</view>
		<!-- <view class="wone">
      <wd-steps :active="active" align-center>
        <wd-step title="用户支付" />
        <wd-step title="待发货" />
        <wd-step title="已发货" />
        <wd-step title="完成" />
      </wd-steps>
    </view> -->
		<view class="wone">
			<text class="shenname">申请租赁详情</text>
			<!-- <view class="faview">
        <text class="fname">发货时间：</text>
        <text class="fval">{{info.mdDeviceApply.createTime}}</text>
        <text class="yulan" v-if="info.mdDeviceApply.pay_img" @click="getyulan(info.mdDeviceApply.pay_img)">【预览图片】</text>
      </view> -->
			<view class="faview" v-for="(item,index) in info.mdDeviceApplyLogs" :key="index">
				<text class="fname">{{ item.text }}：</text>
				<text class="fval">{{ item.createTime }}</text>
			</view>
			<!-- <view class="faview">
        <text class="fname">用户支付：</text>
        <text class="fval">20240829</text>
      </view>
      <view class="faview">
        <text class="fname">用户下单：</text>
        <text class="fval">20240829</text>
      </view> -->
		</view>
		<view class="wone" v-if="info.wuliulist!=''&&info.wuliulist">
			<text class="shenname">物流详情</text>
			<text>{{info.mdDeviceApply.postCode||'物流单号'}}：{{ info.mdDeviceApply.postNo }}</text>
			<view class="wuitem">
				<view class="dinnav">
					<!-- <view class="wuitem" v-for="(item,index) in logistics" :key="index">

            <view class="leftimg" v-if="item.status_name == '已签收' ">
              <image src="/static/transport.png" class="transportimg"/>
            </view>
            <view class="leftyuan" v-else></view>
            <view class="itemcont">
              <text class="name">{{ getordername(item.status_name) }}</text>
              <text class="dizhi mt">{{item.content}}</text>
              <text class="val mt">{{item.time_date}}</text>
            </view>
          </view> -->
					<!-- 显示最新的物流信息 -->
					<view class="wuitem" v-if="info.wuliulist.length!==0&&!isExpand">
						<view class="leftyuan"></view>
						<view class="itemcont">
							<text class="name">{{ info.wuliulist[0].status }}</text>
							<text class="dizhi mt"
								v-if="info.wuliulist[0].context">{{ info.wuliulist[0].context }}</text>
							<text class="val mt">{{ info.wuliulist[0].time }}</text>
							<!-- <text class="val mt">【昆明市】快件在【昆明贡花香满径速运营业点】完成分拣，准备发往【昆明呈贡集散点（鲜花）】【昆明呈贡集散点（鲜花）】</text> -->
						</view>
					</view>
					<!-- 所有的物流信息 -->
					<view v-else>
						<view class="wuitem" v-for="(item,index) in info.wuliulist" :key="index">
							<view class="leftyuan"></view>
							<view class="itemcont">
								<text class="name">{{ item.status }}</text>
								<text class="dizhi mt" v-if="item.context">{{ item.context }}</text>
								<text class="val mt">{{ item.time }}</text>
								<!-- <text class="val mt">【昆明市】快件在【昆明贡花香满径速运营业点】完成分拣，准备发往【昆明呈贡集散点（鲜花）】【昆明呈贡集散点（鲜花）】</text> -->
							</view>
						</view>
					</view>

					<!-- 展开/收起 -->
					<view @click="checkLogistics" v-if="info.wuliulist.length>1">
						<view v-if="!isExpand" class="expandCollapse">
							展开
							<view class="expandCollapseIcon">
								<wd-icon name="arrow-down" size="22px"></wd-icon>
							</view>
						</view>

						<view v-else class="expandCollapse">
							收起
							<view class="expandCollapseIcon">
								<wd-icon name="arrow-up" size="22px"></wd-icon>
							</view>
						</view>
					</view>


					<!-- <view class="wuitem">
            <view class="leftyuan"></view>
            <view class="itemcont">
              <text class="name">运输中</text>
              <text class="dizhi mt">【昆明市】快件已发车</text>
              <text class="val mt">2023-06-23 15:58:36</text>
              <text class="val mt">【昆明市】快件在【昆明贡花香满径速运营业点】完成分拣，准备发往【昆明呈贡集散点（鲜花）】【昆明呈贡集散点（鲜花）】</text>
            </view>
          </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import userApiService from "@/api/user.js"

	const value = ref('')
	var modelValue = ref(true)
	let info = reactive({
		id: '',
		value: {},
		mdDeviceApply: {},
		cuStore: {},
		mdDeviceApplyLogs: [],
		mdDeviceType: {},
		dict: [],
		wuliulist: []

	})
	const active = ref(0)
	const isExpand = ref(false)
	const checkLogistics = () => isExpand.value = !isExpand.value
	onLoad((e) => {
		if (e.id) {
			info.id = e.id
		}
		getinit()
	})

	function nextStep() {
		active.value = active.value + 1
	}

	init()

	function init() {

		userApiService.slist().then(res => {
			console.log(res)
			info.dict = res.dict
		})
	}

	function zifu(e) {
		let dict = info.dict
		let parms = {}
		for (let i in dict) {
			if (dict[i].value == e) {
				parms = dict[i]
			}
		}
		return parms;
	}

	function getinit() {
		userApiService.ndetail({
			pid: info.id
		}).then((res) => {
			console.log(res)
			info.mdDeviceApply = res.mdDeviceApply
			info.cuStore = res.cuStore
			info.mdDeviceApplyLogs = res.mdDeviceApplyLogs
			info.mdDeviceType = res.mdDeviceType
			getwuliu()
		})
	}

	function copytxt(content) {
		// 复制内容，必须字符串，数字需要转换为字符串
		content = typeof content === 'string' ? content : content.toString();
		//#ifndef H5
		uni.setClipboardData({
			data: content,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1000
				});
			},
			fail: function() {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1000
				});
			},
		});
		//#endif
		// #ifdef H5
		if (!document.queryCommandSupported('copy')) {
			//为了兼容有些浏览器 queryCommandSupported 的判断
			msg('浏览器不支持');
		}
		let textarea = document.createElement('textarea');
		textarea.value = content;
		textarea.readOnly = 'readOnly';
		document.body.appendChild(textarea);
		textarea.select(); // 选择对象
		textarea.setSelectionRange(0, content.length); //核心
		let result = document.execCommand('copy'); // 执行浏览器复制命令
		if (result) {
			uni.showToast({
				title: '复制成功',
				icon: 'none',
				duration: 1000
			});
		} else {
			uni.showToast({
				title: '复制失败',
				icon: 'none',
				duration: 1000
			});
		}
		textarea.remove();
		// #endif
	}

	function getyulan(e) {
		let shuzu = []
		shuzu.push(e)
		uni.previewImage({
			current: e, // 当前显示图片的 http 链接
			urls: shuzu // 需要预览的图片 http 链接列表
		});
	}

	function getwuliu() {
		if (info.mdDeviceApply.postNo != null) {
			userApiService.wuliuquery({
				postCode: info.mdDeviceApply.postCode,
				postNo: info.mdDeviceApply.postNo,
			}).then((res) => {
				// console.log(res)
				info.wuliulist = res.data
			})
		}
	}

	function Support(e) {
		let shuzu = [{
				name: '生物微电',
				id: 'swwd'
			},
			{
				name: '点阵波',
				id: 'dzb'
			},
			{
				name: '智能热疗',
				id: 'sprz'
			},
			{
				name: '纳米超导',
				id: 'nmcd'
			},
		]
		let data = []
		if (e) {
			let arr = e.split(",");
			for (let i in arr) {
				for (let j in shuzu) {
					if (arr[i] == shuzu[j].id) {
						data.push(shuzu[j].name)
					}
				}
			}
		}
		return data.toString();
	}


	// ndetail
</script>
<style lang="scss" scoped>
	.user {
		background: #F7F8FC !important;
		height: 100vh;

		.wone {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 25rpx 20rpx;

			.dan {
				display: flex;
				flex-direction: row;
				align-items: center;

				.dannum {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #666666;
				}

				.fzhi {
					margin-left: 20rpx;
					width: 71rpx;
					height: 43rpx;
					background: #F2F2F2;
					border-radius: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
				}
			}

			.dantwo {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;

				.daname {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;

				}

				.shu {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					display: inline-block;
					margin-left: 20rpx;
				}

				.qxbtn {
					margin-left: auto;
					padding: 8rpx 30rpx;
					background: #4d80f0;
					border-radius: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.zname {
				font-weight: 400;
				display: block;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #999999;
			}

			.shenname {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				display: block;
				margin-bottom: 20rpx;
			}

			.faview {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 15rpx;

				.fname {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				.fval {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.yulan {
					font-weight: 500;
					font-size: 28rpx;
					color: #597FE8;
					display: inline-block;
					margin-left: 20rpx;
				}
			}

			.faview:last-child {
				margin-bottom: 0;
			}
		}
	}

	.dinnav {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		background-color: #fff;
		padding: 0rpx 30rpx;

		.expandCollapse {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;

			.expandCollapseIcon {
				margin-top: 10rpx;
			}
		}

		.wuitem {
			min-height: 165rpx;
			border-left: 2rpx solid #E2E3E8;
			padding-left: 50rpx;
			position: relative;
			padding-bottom: 20rpx;

			.leftyuan {
				width: 12rpx;
				height: 12rpx;
				background: #DADADA;
				border-radius: 50%;
				position: absolute;
				left: -6rpx;
				top: -6rpx;

			}

			.leftimg {
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				left: -23rpx;
				top: -23rpx;

				.transportimg {
					width: 100%;
					height: 100%;
				}
			}

			.itemcont {
				display: flex;
				width: 100%;
				height: 100%;
				flex-direction: column;

				.mt {
					display: inline-block;
					margin: 5rpx 0;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					margin-top: -10rpx;
				}

				.dizhi {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
				}

				.val {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #7D7D7D;
				}
			}
		}

		.wuitem:last-child {
			border-left: none;
		}
	}

	.sname {
		margin-left: auto;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>